<template>
  <view class="container">
    <view class="form-box">
      <view class="flex-row">
        <image class="icon-image" src="/static/setting/xgmm.png"></image>
        <text class="setting-text">修改密码</text>
        <navigator class="navigator-link" url="/pages/index/setting/updatePWD">
          <image class="navigator-image" src="/static/images/guanbi.png"></image>
        </navigator>
      </view>
      <view class="divider"></view>
      <!-- <view class="flex-row">
        <image
          class="icon-image"
          style="width: 22rpx; height: 22rpx"
          src="/static/setting/sjsc.png"
        ></image>
        <text class="setting-text">数据上传</text>
        <navigator class="navigator-link" @tap="fileUpload">
          <image class="navigator-image" src="/static/images/guanbi.png"></image>
        </navigator>
      </view> -->
      <!-- <view class="divider"></view> -->
      <view class="flex-row">
        <image class="icon-image" src="/static/setting/sjxz.png"></image>
        <text class="setting-text">数据下载</text>
        <navigator class="navigator-link" @tap="fileDownload">
          <image class="navigator-image" src="/static/images/guanbi.png"></image>
        </navigator>
      </view>
      <view class="divider"></view>
      <view class="flex-row">
        <image
          class="icon-image"
          style="width: 22rpx; height: 22rpx"
          src="/static/setting/jcgx.png"
        ></image>
        <text class="setting-text">检查更新</text>
        <navigator class="navigator-link" @tap="checkUpdate">
          <image class="navigator-image" src="/static/images/guanbi.png"></image>
        </navigator>
      </view>
      <view class="divider"></view>
      <view class="flex-row">
        <image class="icon-image" src="/static/setting/xgxx.png"></image>
        <text class="setting-text">修改信息</text>
        <navigator class="navigator-link" @tap="tosign">
          <image class="navigator-image" src="/static/images/guanbi.png"></image>
        </navigator>
      </view>
      <view class="divider"></view>
      <view class="flex-row">
        <image class="icon-image" src="/static/setting/gywm.png"></image>
        <text class="setting-text">关于我们</text>
        <navigator class="navigator-link" url="/pages/index/setting/aboutUS">
          <image class="navigator-image" src="/static/images/guanbi.png"></image>
        </navigator>
      </view>
      <view class="divider"></view>
    </view>
  </view>
  <!-- 修改信息弹窗 -->
  <uni-popup ref="popup" background-color="#fff">
    <view class="popup-content">
      <scroll-view scroll-y class="Y">
        <view class="avatar">
          <view class="img"
            ><image src="../../../static/images/ystx.png" mode="scaleToFill"
          /></view>
        </view>
        <view class="item">
          <text class="label">身份证：</text>
          <view class="input"><input type="text" v-model="userforms.idNumber" disabled /></view>
        </view>
        <view class="item">
          <text class="label">账号:</text>
          <view class="input"
            ><input type="text" v-model="MemberStore.profile.doctorInfo.account" disabled
          /></view>
        </view>
        <view class="item">
          <text class="label">姓名：</text>
          <view class="input"><input type="text" v-model="userforms.name" /></view>
        </view>
        <view class="item">
          <text class="label">电话：</text>
          <view class="input"><input type="text" v-model="userforms.phoneNumber" /></view>
        </view>
        <view class="item">
          <text class="label">性别：</text>
          <view class="input"
            ><radio-group @change="ongenderChange">
              <label class="radio">
                <radio value="男" color="#27ba9b" :checked="userforms.sex === '男'" />
                男
              </label>
              <label class="radio">
                <radio value="女" color="#27ba9b" :checked="userforms.sex === '女'" />
                女
              </label>
            </radio-group></view
          >
        </view>
        <!-- 提交按钮 -->
        <view style="height: 35rpx; width: 100%; display: flex; justify-content: center"
          ><view @tap="summit" class="form-button"><text class="save">保存</text></view></view
        >
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/index'
import { modifyAPI } from '@/services/login'
import { ref } from 'vue'
import { login } from '@/services/login'
const MemberStore = useMemberStore()

//弹窗实例
const popup = ref()
//打开弹窗
const tosign = () => {
  popup.value.open('center')
}
//医生信息表单
const userforms = ref({
  id: MemberStore.profile.doctorInfo.id,
  name: MemberStore.profile.doctorInfo.name,
  sex: MemberStore.profile.doctorInfo.sex,
  age: MemberStore.profile.doctorInfo.age,
  idNumber: MemberStore.profile.doctorInfo.idNumber,
  phoneNumber: MemberStore.profile.doctorInfo.phoneNumber,
})
//提交修改信息
const summit = async () => {
  const res = await modifyAPI(userforms.value)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '修改成功' })
    Login()
    popup.value.close()
  }
}
//修改性别的选中状态
const ongenderChange = (ev: any) => {
  userforms.value.sex = ev.detail.value
}
//重新登录，更新本地信息
const Login = async () => {
  const res = await login({
    account: MemberStore.profile.doctorInfo.account,
    password: MemberStore.profile.doctorInfo.password,
  })
  //将数据存到本地
  MemberStore.setProfile(res.data)
}

//数据上传
const fileUpload = () => {
  uni.showModal({
    content: '确认要批量导入患者档案吗？',
    success: async (res) => {
      if (res.confirm) {
        // 用户点击了确定按钮
        openFile()
      } else if (res.cancel) {
        // 用户点击了取消按钮
        console.log('用户点击了取消按钮')
      }
    },
  })
}

//选择文件上传


//数据下载
const fileDownload = () => {
  uni.showModal({
    content: '确认要导出患者档案吗？',
    success: async (res) => {
      if (res.confirm) {
        // 用户点击了确定按钮
        uni.downloadFile({
          url: 'http:///120.55.240.46:8080/patient/exportExcel',
          header: {
            Authorization: MemberStore.profile?.token,
          },
          success: (res) => {
            if (res.statusCode === 200) {
              console.log('下载成功：', res.tempFilePath)
              //下载成功，并把下载好的文件保存在临时区域中
              uni.saveFile({
                //使用该功能，以将临时文件保存在手机中可长久存储的区域
                tempFilePath: res.tempFilePath,
                success: (saveResult) => {
                  // 在保存文件成功后，使用 uni.openDocument 方法打开文件
                  console.log('文件保存成功:', saveResult)
                  uni.openDocument({
                    filePath: saveResult.savedFilePath,
                    fileType: 'xlsx', //这里把预先限定好的文件类型传来
                    success: function () {
                      console.log('文件打开成功!')
                      //至此，手机会从app中跳转到文件预览界面
                      //之后可从预览界面返回app中
                    },
                    fail: function (err) {
                      console.log('打开失败', err)
                    },
                  })
                },
                fail: function (err) {
                  console.log('保存文件失败', err)
                },
              })
            }
          },
        })
      } else if (res.cancel) {
        // 用户点击了取消按钮
        console.log('用户点击了取消按钮')
      }
    },
  })
}

//检查更新
const checkUpdate = () => {
  //  获取manifest.json里的配置信息
  plus.runtime.getProperty(plus.runtime.appid as any, function (widgetinfo) {
    // 可以根据manifest.json里的应用名称来进行针对性的APP升级
    if (widgetinfo.name == '安心家庭医生') {
      //APP名称
      uni.request({
        url: 'https://www.pgyer.com/apiv2/app/check', //检测App是否有更新
        data: {
          _api_key: '81f02a7a7e62073aaff32faadbc3b4ca', //API 用户自己的Key
          appKey: '937dfcd375cfbbaa30a1013f7353288d', //App应用的唯一Key
        },
        success: (check: any) => {
          console.log('check', check.data)
          if (check.statusCode == 200 && check.data.code == 0 && check.data.data) {
            let data = check.data.data
            console.log('data', data)
            let version = widgetinfo.version, //用户当前版本
              appVersion = data.buildVersion, //升级包版本
              appName = widgetinfo.name, //app名称
              appurl = data.downloadURL, //升级包地址
              intro = '发现新的《安心家庭医生》APP,需要更新APP' //升级包提示
            //如果用户版本号小于升级包版本号，先升级
            console.log('用户当前版本', version)
            console.log('升级包版本', appVersion)
            if (data && version! < appVersion) {
              uni.showModal({
                title: '更新提示',
                confirmText: '立即升级',
                content: intro,
                success: (res) => {
                  if (res.confirm) {
                    uni.showLoading({
                      title: '正在更新',
                      mask: true,
                    })
                    uni.downloadFile({
                      url: appurl,
                      success: (download) => {
                        if (download.statusCode == 200) {
                          plus.runtime.install(
                            download.tempFilePath,
                            {
                              force: false,
                            },
                            () => {
                              uni.hideLoading()
                              plus.runtime.restart() //更新成功启动
                            },
                            (err) => {
                              //若没下载成功还是去下载
                              uni.hideLoading()
                              uni.showToast({
                                title: '更新失败，将跳转下载页面',
                                icon: 'none',
                                duration: 2000,
                              })
                            },
                          )
                          setTimeout(function () {
                            plus.runtime.openURL(appurl)
                          }, 2000)
                        }
                      },
                    })
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                    uni.showToast({
                      title: '版本无法继续使用安心家庭医生APP,请先升级',
                      icon: 'none',
                      duration: 2000,
                    })
                    //退出app
                    setTimeout(function () {
                      plus.runtime.quit()
                    }, 2000)
                  }
                },
                fail: () => {
                  uni.hideLoading()
                },
              })
            } else {
              //APP版本不用更新
              uni.showToast({
                title: 'APP已是最新版本！',
                icon: 'none',
                duration: 2000,
              })
            }
          }
        },
      })
    }
  })
}
</script>

<style scoped lang="scss">
.icon-image {
  width: 20rpx; /* 根据你的图标大小调整 */
  height: 20rpx; /* 根据你的图标大小调整 */
  margin-right: 10rpx; /* 在图标和文本之间添加一些间距 */
}
.setting-text {
  font-size: 15rpx;
  /* 这里可以添加你想要的文本样式，比如字体大小、颜色等 */
}
.flex-row {
  display: flex;
  align-items: center;
  /* 垂直对齐 */
  /* 水平对齐，两侧留有空间 */
  /* 如果需要更紧密的对齐，可以使用 'flex-start' 代替 'space-between' */
  margin-top: 10rpx;
}

.navigator-link {
  margin-left: 480rpx;
  /* 文本与导航链接之间的间距 */
  display: flex; /* 确保图标在 navigator 内部正确对齐 */
  align-items: center; /* 垂直对齐图标 */
}
.navigator-image {
  width: 23rpx; /* 设置图标宽度 */
  height: 23rpx; /* 设置图标高度 */
  /* 根据需要调整图标的大小 */
}

.my-button {
  margin-top: 60rpx;
  margin-bottom: 40rpx;
  width: 120rpx;
  height: 30rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #02abf3;
  /* 红色背景 */
  color: #ffffff;
  /* 白色文字 */
  border-radius: 10rpx;
  /* 可选：圆角 */
  font-size: 10rpx;
}

.divider {
  height: 1rpx;
  /* 分割线高度 */
  background-color: #d3d3d3;
  /* 分割线颜色 */

  margin: 10rpx 10rpx 0rpx 0rpx;
  /* 减小上下外边距 */
  display: block;
  /* 确保分割线占据一整行 */
}

.container {
  padding: 10rpx;
  /* 设置页面内边距 */
}

.form-box {
  background-color: #fff;
  /* 设置矩形框背景色 */
  border-radius: 10rpx;
  /* 设置矩形框圆角 */
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  /* 设置阴影效果 */
  padding: 10rpx;
  /* 设置矩形框内边距 */
  width: 100%;
  height: calc(100vh - 70rpx);
}

.popup-content {
  height: 300rpx;
  width: 400rpx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 20rpx 40rpx;
  .Y {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .form-button {
    font-size: 16rpx;
    height: 35rpx;
    border-radius: 10rpx;
    line-height: 35rpx;

    color: #fff;
    text-align: center;
    background-color: #2392ed;
    width: 100rpx;
    margin-top: 10rpx;
  }
  .avatar {
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .img {
      height: 50rpx;
      width: 50rpx;
    }
  }
  .item {
    height: 40rpx;
    width: 100%;
    display: flex;
    font-size: 16rpx;
    text-align: center;
    line-height: 40rpx;
    margin-top: 10rpx;
    .label {
      margin: 0 10rpx;
    }
    .input {
      text-align: left;
      border-bottom: 1rpx solid #ccc;
      flex: 1;
      color: #aca8a8;
      input {
        height: 100%;
        font-size: 16rpx;
      }
    }
  }
}
</style>
